<template>
  <div class="user-cernter">
    <div class="user-info">
      <div class="out-btn-box">
        <span @click="accountLogout">退出</span>
        <i>|</i>
        <span @click="editRouter">修改密码</span>
      </div>
      <div class="user-info-detail">
        <div class="user-info-img">
          <img :src="(userMsg.user && userMsg.user.photo)?`${__ctx}/sys/sysFile/download?fileId=${userMsg.user.photo}`:imgUrl" />
        </div>
        <div class="user-info-box">
          <p class="user-info-title">
            {{ userMsg.user && userMsg.user.fullname }}
          </p>
          <div class="user-info-show">
            <div class="myPopover" v-if="orgList.length > 0">
              <span @click="IsShowOrgList = !IsShowOrgList"
                >部门
                <img
                  :src="imgArrow"
                  :class="IsShowOrgList ? 'imgArrow downImg' : 'imgArrow'"
                />
              </span>
              <ul class="my-group-radio" v-if="IsShowOrgList">
                <div @click="IsShowOrgList = false" class="my-group-mark"></div>
                <li
                  v-for="({ groupName, groupId }, index) in orgList"
                  :key="index"
                  :class="groupIdActive == groupId && 'active'"
                  @click="orglistClick(groupId,groupIdActive == groupId)"
                >
                  {{ groupName }}
                </li>
              </ul>
            </div>
            <span>{{ userMsg.currentOrg && userMsg.currentOrg.groupName }}</span>
          </div>
        </div>
      </div>
      <div class="my-group" v-if="supportOA">
        <label class="my-group-label">公告</label>
        <marquee class="my-marquee">
          <marquee-item v-for="({ title,id }, index) in marqueeData" :key="index">
            <router-link :to="{ path:'/noticeDetail',query:{id} }">
            <p class="my-marquee-item">{{ title }}</p>
            </router-link>
          </marquee-item>
        </marquee>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav-item-box">
        <div
          class="nav-item"
          v-for="(item, index) in userMenuList"
          :key="index"
        >
          <div class="nav-item-title">
            <h3>{{ item.name }}</h3>
          </div>
          <div class="nav-navList-box">
            <ul class="nav-navList-ul">
              <li v-for="(child, indexKey) in item.children" :key="indexKey" class="nav-navList-li">
                <router-link :to="child.path">
                  <i
                    :class="`fa ${child.icon}`"
                    :style="`background-color:${bgColor[index][indexKey]};`"
                  ></i>
                  <p class="nav-label">{{ child.name }}</p>
                  <p
                    class="nac-num"
                    v-if="flowCounts.todoTask > 0 && child.name == '待办事项'"
                  >
                    共{{ flowCounts.todoTask }}项
                  </p>
                  <p
                    class="nac-num"
                    v-if="
                      flowCounts.copyMeCount > 0 && child.name == '我的抄送'
                    "
                  >
                    共{{ flowCounts.copyMeCount }}项
                  </p>
                  <badge
                    v-show="flowCounts.todoTask > 0 && child.name == '待办事项'"
                  ></badge>
                  <badge
                    v-show="
                      flowCounts.copyMeCount > 0 && child.name == '我的抄送'
                    "
                  ></badge>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <group-title>提示：部分任务不支持移动端办理，请移步PC端处理 </group-title>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";
export default {
  created: function() {
    this.getNotifyData();
    //将权限放到缓存中，提前拿出来。防止获取当前用户信息等待时间太长。每次进首页再更新下
    if (window.localStorage) {
      var userMsgJson = localStorage.getItem("userMsg");
      if (userMsgJson) {
        try {
          this.userMsg = JSON.parse(userMsgJson);
          this.handleUserMenu();
        } catch (error) {}
      }
    }

    this.getData();
  },
  methods: {
    getData() {
      var defer = this.baseService.postForm(
        this.__ctx + "/org/userResource/userMsg",
        { system: "mobile" }
      );
      defer.then(data => {
        if (!data.isOk) {
          if (data.code === "401") {
            if (setting.supportWxOauth2) {
              this.toLogin();
            } else {
              Vue.toLogin(this.getData);
            }
          } else {
            alert(data.msg);
          }
        } else {
          this.userMsg = data.data;
          localStorage.setItem("userMsg", JSON.stringify(data.data));
          this.handleUserMenu();
          this.getFlowCounts();
        }
      });
    },
    editRouter() {
      this.$router.push({
        path: "/homeEdit",
        name: "HomeEdit",
        params: { user: this.userMsg.user }
      });
    },
    handleUserMenu() {
      let _data = this.userMsg;
      this.userMenuList = _data.userMenuList;
      this.orgList = _data.orgList; //组织架构IsShowOrgList
      this.groupIdActive = _data.currentOrg && _data.currentOrg.groupId;
    
    },
    getFlowCounts() {
      var defer = this.baseService.postForm(
        this.__ctx + "/bpm/my/getMyFlowCounts",
        {}
      );
      defer.then(data => {
        this.flowCounts = data.data;
      });
    },
    accountLogout() {
      let getDefer = this.baseService.get(this.__ctx + "/logout");
      let _this = this;
      getDefer.then(data => {
        if (data.isOk) {
          this.$vux.toast.show({
            text: data.msg || "退出成功！",
            onHide() {
              _this.$router.push("/login");
            }
          });
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    },
    logout() {
      window.close();
      let getDefer = this.baseService.get(
        this.__ctx + "/userResource/changeOrg?orgId=" + id
      );
    },
    toLogin() {
    	let appId = setting.weixinAppId;
       	let redirect_uri = setting.redirect_uri;
        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURI(redirect_uri)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
        window.location.href = url 
    },
    orglistClick(id, bol) {
      //切换部门
      if (bol) {
        return this.$vux.toast.text("已是当前部门，无需切换！");
      }
      this.groupIdActive = id;
      this.IsShowOrgList = false;
      let getDefer = this.baseService.get(
        this.__ctx + "/userResource/changeOrg?orgId=" + id
      );
      getDefer.then(data => {
        if (data.isOk) {
          this.$vux.toast.text(data.msg || "切换部门成功");
          this.getData();
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    },
    getNotifyData() {
      //获取3条公告信息
      let defer = this.baseService.postForm(
        this.__ctx + "/oa/oANotify/queryCustomerNotify",
        { offset: 0, limit: 3 }
      );
      defer.then(data => {
        let { isOk, rows } = data;
        if (isOk) {
          this.marqueeData = rows;
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    }
  },
  name: "Home",
  data() {
    return {
      supportOA : setting.supportOA, 
      flowCounts: {},
      userMsg: { user: {} },
      userMenuList: [],
      msg: "Welcome to Your Vue.js App",
      sqlList: [],
      customerSqlList: [],
      imgUrl: require("../assets/user/user.svg"),
      imgArrow: require("../assets/user/arrow.svg"),
      orgList: [], //部门数据
      groupIdActive: "", //选中的部门
      IsShowOrgList: false,
      bgColor: [
        {
          0: "#2f54eb",
          1: "#722ed1",
          2: "#eb2f96",
          3: "#ff7a45",
          4: "#ffa940"
        },
        {
          0: "#f5222d",
          1: "#52c41a",
          2: "#fa8c16",
          3: "#f759ab",
          4: "#9254de",
       	  5: "#2f54eb",
          6: "#722ed1",
          7: "#eb2f96",
          8: "#ff7a45",
        },
        {
          0: "#d48806",
          1: "#d4b106",
          2: "#7cb305",
          3: "#597ef7",
          4: "#597ef7",
          5: "#f5222d",
          6: "#52c41a",
          7: "#fa8c16",
          8: "#f759ab",
        },
        {
          0: "#52c41a",
          1: "#fa541c",
          2: "#1890ff",
          3: "#73d13d",
          4: "#ffc53d"
        },{
            0: "#2f54eb",
            1: "#722ed1",
            2: "#eb2f96",
            3: "#ff7a45",
            4: "#ffa940"
          }
      ],
      marqueeData: []
    };
  }
};
</script>

<style scoped lang="less">
.user-cernter {
  background-color: #f0f0f0;
  .user-info {
    position: relative;
    border-radius: 0 0 5% 5%;
    background-color: #40a9ff;
    background-image: linear-gradient(#096dd9, #69c0ff);
    width: 100%;
    height: 18em;
    .out-btn-box {
      height: 5em;
      width: 100%;
      line-height: 5em;
      text-align: right;
      color: #fff;
      i {
        font-style: normal;
      }
      span {
        font-size: 1.1em;
        letter-spacing: 1.5;
        padding: 0.5em;
        margin-right: 0.5em;
      }
    }
    .user-info-detail {
      padding: 0 2.8em;
      .user-info-img {
        display: inline-block;
        width: 7em;
        height: 7em;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid #fff;
        background-color: #fff;
        img {
          width: 100%;
        }
      }
      .user-info-box {
        display: inline-block;
        width: calc(~"100% - 9.5em");
        margin-left: 1.5em;
        vertical-align: top;
        height: 7em;
        padding: 0.8em 0;
        .user-info-title {
          color: #fff;
          font-size: 1.8em;
          margin-bottom: 0.2em;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .user-info-show {
          color: #fff;
          font-size: 1.3em;
          .myPopover {
            display: inline-block;
            position: relative;
            .my-group-radio {
              position: absolute;
              top: calc(~"1.3em + 8px");
              left: 0;
              background-color: #fff;
              color: #262626;
              width: 150px;
              border-radius: 3px;
              z-index: 11;
              border: 1px solid #bae7ff;
              padding: 0 10px;
              font-size: 1em;
              &::after {
                content: "";
                position: absolute;
                left: 15px;
                margin-left: -4px;
                top: -4px;
                width: 8px;
                height: 8px;
                border-top: 1px solid #bae7ff;
                border-left: 1px solid #bae7ff;
                background-color: #fff;
                z-index: 10;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
              }
              li {
                &:last-child {
                  border-bottom: 0;
                }
                padding: 10px;
                border-bottom: 1px dotted #bae7ff;
                color: #8c8c8c;
                &.active {
                  color: #40a9ff;
                  background: url("../assets/user/active.svg") no-repeat right
                    10px center / 20px;
                }
              }
              .my-group-mark {
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
              }
            }
            .imgArrow {
              width: 12px;
              &.downImg {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
    }
    .my-group {
      position: absolute;
      bottom: -22px;
      width: 94%;
      left: 3%;
      right: 3%;
      background-color: #fff;
      border-radius: 4px;
      height: 5em;
      line-height: 5em;
      .my-group-label {
        display: inline-block;
        font-size: 1.4em;
        width: 5em;
        vertical-align: top;
        text-align: center;
        color: #003a8c;
      }
      .my-marquee {
        display: inline-block;
        width: calc(~"100% - 8em");
        .my-marquee-item {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 98%;
          color: #8c8c8c;
          font-size: 1.2em;
          padding-right: 5px;
        }
      }
    }
  }
  .nav-box {
    width: 93%;
    margin: 21px auto 0;
    .nav-item-box {
      padding-top: 1px;
      .nav-item {
        border-radius: 5px;
        background-color: #fff;
        margin-top: 15px;
        .nav-item-title {
          border-bottom: 1px solid #dcdee2;
          padding: 10px;
          h3 {
            color: #17233d;
            font-size: 1.3em;
            line-height: 2em;
            font-weight: 500;
            font-family: initial;
          }
        }
        .nav-navList-box {
          padding-top: 20px;
          .nav-navList-ul {
            *zoom: 1;
            &::after {
              content: "";
              display: block;
              height: 0;
              clear: both;
              visibility: hidden;
            }
            .nav-navList-li {
              float: left;
              margin-bottom: 15px;
              a {
                display: block;
                width: 90px;
                height: 110px;
                text-align: center;
                position: relative;
                .fa {
                  width: 55px;
                  height: 55px;
                  color: #fff;
                  border-radius: 8px;
                  position: relative;
                  margin-top: 10px;
                  &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
                .nav-label {
                  font-size: 1.2em;
                  line-height: 1.3;
                  color: #333;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  width: 80%;
                  margin: 0 auto;
                  padding: 3px 0;
                }
                .nac-num {
                  font-size: 1em;
                  color: #808695;
                }
                .vux-badge.vux-badge-dot {
                  position: absolute;
                  right: 16px;
                  top: 0px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
.weui-grids {
  background-color: #fff;
}
</style>
